<script setup lang="ts">
const $emit = defineEmits<{ (e: 'get-list'): void }>()

function handleCurrentChange() {
    $emit('get-list')
}

</script>

<template>
    <el-pagination class="self-pagination" background layout="prev, pager, next" hide-on-single-page v-bind="$attrs"
        @current-change="handleCurrentChange" />
</template>

<style lang="scss" scoped>
.self-pagination {
    margin-bottom: 30px;
    justify-content: end;

    &:deep(.is-active) {
        background-color: var(--primary-color) !important;

        &:hover {
            color: #ffffff;
        }
    }

    &:deep(.el-pager) {
        li {
            &:not(.is-active) {
                &:hover {
                    color: var(--primary-color);
                }
            }
        }
    }
}
</style>
